import { useNavigate } from 'react-router-dom';
import { useGameStore } from '../store/gameStore';
import { Play, RotateCcw, Home, Settings } from 'lucide-react';

export default function PauseMenu() {
  const navigate = useNavigate();
  const { resumeGame, restartGame } = useGameStore();

  const handleContinue = () => {
    resumeGame();
  };

  const handleRestart = () => {
    restartGame();
  };

  const handleSettings = () => {
    navigate('/settings');
  };

  const handleMainMenu = () => {
    navigate('/');
  };

  return (
    <div className="fixed inset-0 z-50 bg-black bg-opacity-50 flex items-center justify-center">
      <div className="bg-gradient-to-br from-amber-100 to-amber-200 rounded-lg p-8 border-4 border-amber-600 shadow-2xl max-w-md w-full mx-4">
        {/* 标题 */}
        <div className="text-center mb-8">
          <h2 className="text-3xl font-bold text-amber-900 mb-2">
            游戏暂停
          </h2>
          <p className="text-amber-700">
            选择一个操作继续游戏
          </p>
        </div>

        {/* 菜单按钮 */}
        <div className="space-y-4">
          {/* 继续游戏 */}
          <button
            onClick={handleContinue}
            className="w-full flex items-center justify-center gap-3 px-6 py-4 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-medium text-lg"
          >
            <Play className="w-6 h-6" />
            继续游戏
          </button>

          {/* 重新开始 */}
          <button
            onClick={handleRestart}
            className="w-full flex items-center justify-center gap-3 px-6 py-4 bg-orange-600 text-white rounded-lg hover:bg-orange-700 transition-colors font-medium text-lg"
          >
            <RotateCcw className="w-6 h-6" />
            重新开始
          </button>

          {/* 游戏设置 */}
          <button
            onClick={handleSettings}
            className="w-full flex items-center justify-center gap-3 px-6 py-4 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium text-lg"
          >
            <Settings className="w-6 h-6" />
            游戏设置
          </button>

          {/* 返回主菜单 */}
          <button
            onClick={handleMainMenu}
            className="w-full flex items-center justify-center gap-3 px-6 py-4 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors font-medium text-lg"
          >
            <Home className="w-6 h-6" />
            返回主菜单
          </button>
        </div>

        {/* 快捷键提示 */}
        <div className="mt-8 pt-6 border-t border-amber-400">
          <h3 className="text-sm font-bold text-amber-900 mb-3 text-center">
            快捷键提示
          </h3>
          <div className="grid grid-cols-2 gap-2 text-xs text-amber-700">
            <div className="flex justify-between">
              <span>继续游戏:</span>
              <span className="font-mono bg-amber-200 px-1 rounded">空格</span>
            </div>
            <div className="flex justify-between">
              <span>暂停菜单:</span>
              <span className="font-mono bg-amber-200 px-1 rounded">ESC</span>
            </div>
            <div className="flex justify-between">
              <span>重新开始:</span>
              <span className="font-mono bg-amber-200 px-1 rounded">R</span>
            </div>
            <div className="flex justify-between">
              <span>主菜单:</span>
              <span className="font-mono bg-amber-200 px-1 rounded">H</span>
            </div>
          </div>
        </div>

        {/* 装饰性元素 */}
        <div className="absolute -top-2 -left-2 w-8 h-8 bg-amber-600 rounded-full opacity-20" />
        <div className="absolute -top-1 -right-3 w-6 h-6 bg-amber-500 rounded-full opacity-30" />
        <div className="absolute -bottom-2 -left-3 w-10 h-10 bg-amber-400 rounded-full opacity-15" />
        <div className="absolute -bottom-1 -right-2 w-7 h-7 bg-amber-700 rounded-full opacity-25" />
      </div>
    </div>
  );
}